<template>
    <div class="bg">
        <el-card class="box-card">
            <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="60px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="mobile">
                        <el-input type="text" v-model="ruleForm.mobile" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </el-form-item>
            </el-form>
        </el-card>
        
    </div>


</template>
  
  <script>
  export default {
    name:'Login',
    props: {
    },
    data(){
      return {
        ruleForm:{
            mobile:'',
            pwd:''
        }
      }
    },
    methods: {
        submitForm(){
            this.api.login(this.ruleForm.mobile,this.ruleForm.pwd).then(res=>{
                if(res.code==0){
                    localStorage.setItem("userInfo",JSON.stringify(res.data));
                    localStorage.setItem("token",res.data.token);
                    this.$router.push("/home/hello");
                }else{
                    this.$message.error(res.message);
                }
            },err=>{});
            
        }
    }
  }
  </script>
  
  <style scoped>
  .box-card{
    width: 400px;
    top: 200px;
    right: 200px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    

  }
  .bg{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/bg.jpg');
    background-size: cover;
  }
  </style>
  